<template>
  <page-view :title="false" >
     <a-card :bordered="false">
      <div class="table-operator">
       <a-button type="primary" v-action:sysRoleAdd @click="handleCreate()">新增</a-button>
     </div>
    <a-table 
    ref="table"
    :columns="columns" 
    :rowKey="record => record.id"
    :dataSource="sysRoleList" 
    :pagination="pagination"
    @change="handleTableChange">
       <span slot="action" slot-scope="text, record">
          <a style="margin-right:10px;" href="javascript:;"  v-action:sysRoleEdit @click="handleEdit(record)">编辑</a>
          <a href="javascript:;"   v-action:sysRoleDelete  @click="handleDel(record)">删除</a>
       </span>
      <span slot="type" slot-scope="text">
        {{ text | typeFilter }}
      </span>

    </a-table>
    
    <sys-role-modal ref="roleModal" @ok="handleSaveOk" />
 
 </a-card>
  </page-view>

</template>
<script>
import { PageView } from '@/layouts'
import SysRoleModal from './SysRoleModal'
import {  delRole, getRoleList } from '@/api/sys'

export default {
  name: 'SysRole',
  components: {
    PageView,
    SysRoleModal
  },
  data() {
    return {
      columns,
      visible: false,
      sysRole: {
        type: 1,
        orderNum: 1
      },
      pagination: {},
      sysRoleList: [],
      queryParams: {pageNo: 1, pageSize: 10 },
    }
  },
  methods: {
     handleTableChange (pagination, filters, sorter) {
      console.log(pagination);
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.queryParams = {
        pageSize: pagination.pageSize,
        pageNo: pagination.current,
        sortField: sorter.field,
        sortOrder: sorter.order,
        ...filters,
      }
      this.loadRoleList(this.queryParams)
    },
    handleEdit(record) {
      this.$refs.roleModal.handleEdit(record)
    },
    handleCreate() {
     this.$refs.roleModal.handleCreate()
    },
    handleDel(record){
      const _this = this
      this.$confirm({
        title: '你确定删除该记录吗？',
        content: '点击确定，1s后会关闭该框',
        onOk() {
           delRole(record).then(res => {
           if(res.status == 0){
            _this.loadRoleList({pageNo: 1, pageSize: 10 })
            _this.$message.success('成功');
           }else{
            _this.$message.error(res.msg)
           }
         })
        },
        onCancel() {},
      });
    },
    // handler
    handleSaveOk () {
       this.loadRoleList({pageNo: 1, pageSize: 10 })
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    loadRoleList(queryParams){
        var _this = this
        getRoleList(queryParams)
              .then(res => {
                const result = res.data
                _this.sysRoleList = result.records
                _this.pagination = {
                  total: result.total,
                  pageSize: result.size,
                  current: result.current
                }
                console.log( _this.pagination)
              })
    }
  },
  created() {
   this.loadRoleList({pageNo: 1, pageSize: 10 })
  },
  filters: {
    typeFilter (type) {
      const typeMap = {
        1: '菜单',
        2: '动作'
      }
      return typeMap[type]
    }
  }
}


const columns = [
  {
    title: 'id',
    dataIndex: 'id',
    key: 'id',
    width: '12%'
  },
  {
    title: '角色名',
    dataIndex: 'roleName',
    key: 'roleName',
    width: '12%'
  },
  {
    title: '备注',
    dataIndex: 'type',
    key: 'type',
    scopedSlots: { customRender: 'type' }
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' },
    width: '30%'
  }
]

</script>
